<template>
  <div class="addressDetail">
    <!-- 保存地址 -->
    <div class="addaddress">
      <!-- 姓名 -->
      <div class="item">
        <van-field v-model="userName" placeholder="姓名" required :rules="[{ required: true, message: '请填写用户名' }]" />
      </div>
      <!-- 手机号码 -->
      <div class="item">
        <van-field v-model="telNumber" type="tel" placeholder="手机号码" required :rules="[{ required: true, message: '请填写手机号码' }]" />
      </div>
      <!-- 城市 -->
      <div class="item">
        <van-field v-model="address" placeholder="省份、城市、区县" readonly @click="isShowEvents" required :rules="[{ required: true, message: '请选择省市区' }]" />
        <!-- 弹出层 -->
        <van-popup v-model="isShow" position="bottom" :style="{ height: '45%' }">
          <van-area title="省市区" :area-list="areaList" @confirm='confirmEvents' @cancel='cancelEvents' />
        </van-popup>
      </div>
      <!-- 详细地址 -->
      <div class="item">
        <van-field v-model="detailAddress" placeholder="详细地址，如楼道、楼盘号等" required :rules="[{ required: true, message: '请填写详细地址' }]" />
      </div>
      <!-- 设置为默认地址 -->
      <div class="default">
        <van-checkbox v-model="isChecked" shape="square">设置为默认地址</van-checkbox>
      </div>
      <!-- 保存 -->
      <div class="submit" @click="onSubmit">保存</div>
    </div>
  </div>
</template>

<script>
import { saveAction, detailAction } from "@/api/my";
// 默认的省市区数据
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      userName: "", // 姓名
      telNumber: "", // 手机号码
      address: "", // 省市区
      detailAddress: "", // 详细地址
      isShow: false, // 弹出层
      isChecked: false, // 设置为默认地址
      areaList, // 默认的省市区数据
      addressId: "", // 传递的id
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    if (this.$route.query.id) {
      // 获取收货地址详情
      detailAction({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.data.data.is_default == 1) {
          this.isChecked = true;
        } else {
          this.isChecked = false;
        }
        this.userName = res.data.data.name;
        this.telNumber = res.data.data.mobile;
        this.address = res.data.data.address;
        this.detailAddress = res.data.data.address_detail;
        this.addressId = res.data.data.id;
      });
    }
  },
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 保存
    onSubmit() {
      // 判断有木有传id
      if (this.$route.query.id) {
        this.addressId = this.$route.query.id;
      } else {
        this.addressId = "";
      }
      // 保存和跟添加收货地址
      saveAction({
        address: this.address,
        addressId: this.addressId,
        checked: this.isChecked,
        detailadress: this.detailAddress,
        openId: localStorage.getItem("openId"),
        telNumber: this.telNumber,
        userName: this.userName,
      }).then((res) => {
        this.$toast.success("保存成功");
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      });
    },
    // 省市区 - 打开
    isShowEvents() {
      this.isShow = true;
    },
    // 省市区 - 确认
    confirmEvents(val) {
      var arr = val.map((ele) => ele.name);
      this.address = arr.join(" ");
      this.isShow = false;
    },
    // 省市区 - 取消
    cancelEvents() {
      this.isShow = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.addressDetail {
  height: 100%;
  // 保存地址
  .addaddress {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    .item {
      width: 345px;
      padding: 5px 0;
      margin: 0 auto;
      border-bottom: 1px solid #f4f4f4;
      van-field {
        padding: 10px 16px;
      }
    }
    .default {
      margin: 20px 15px 0;
      padding: 5px 0;
    }
    .submit {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      height: 50px;
      line-height: 50px;
      background: #b4282d;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>